<!-- 商品详情 -->
<template>
    <view class="seller_details">
    		<view class="popularity_details_content">
    			<!-- 轮播图 -->
    			<banner 
                    :banners="base_info.banners" 
                    background="#FF504C" 
                    swiperHeight="520rpx" 
                    :heightFix="true"
                ></banner>
    			<!-- 商品信息 -->
    			<view class="info">
    				<view class="title">
    					<p>{{ product.score }}积分</p>
    					<span>{{ product.activeScore }}积分</span>
    				</view>
    				<view class="label">
    					<span>已兑{{ product.exchange }}件</span>
    				</view>
    				<view class="value">
    					<p>{{ product.title }}</p>
    					<span>每人限购{{ product.limit }}台</span>
    				</view>
    			</view>
    			<view class="body">
                    <!-- 温馨提示 -->
                    <view class="hint">
                    	<view class="item">
                    		<view>
                    			<view class="name">温馨提示</view>
                                <view class="value">一经开封，如无质量问题不予退换</view>
                    		</view>
                    	</view>
                    </view>
    				<!-- 选择规格 -->
    				<view class="cell">
    					<view class="item" @click="show_specification">
    						<view>
    							<view class="name">选择</view>
    							<view class="value">
                                    {{ specification ? specification : '请选择规格数量' }}
                                </view>
                                <image class="right_arrow" src="/static/img/right_arrow.png"></image>
    						</view>
    					</view>
    				</view>
    				<!-- 猜你喜欢 -->
    				<view class="goods_container">
                        <view class="love">{{goods.title}}</view>
                        <view class="goods-box" >
                                <view class="goods"  
                                    v-for="(item,i) in goods.goods" :key="i" 
                                    @click="jump(item.url)"
                                >
                                    <img :src="item.img" alt />
                                    <p>{{ item.label }}</p>
                                    <span>{{ item.value }}</span>
                                </view>
                        </view>
    				</view>
                    <!-- 商品介绍 -->
                    <view class="advert">
                        <view class="advert_title">{{advert_list.title}}</view>
                        <view class="imgs" 
                            v-for="(item,index) in advert_list.advert" :key="index"
                        >
                            <image :src="item.img" mode="widthFix"></image>
                        </view>
                    </view>
                    <!-- 拼团标识 -->
                    <!-- 假装已经有点击事情。 -->
                    <view class="group">
                        <image src="/static/img/group.png" @click="onClick"></image>
                    </view>
    				<!-- 底部按钮 -->
					<!-- <view class="tab_bottom"> -->
    				<goods-tabs :data="goods_tabs"></goods-tabs>
					<!-- </view> -->
    			</view>    			
    			<!-- 点击选择一栏的弹窗 -->
    			<specification-popup ref="specificationPopup" @close="close"></specification-popup>
                <popup ref="popup" :data="popup" @sure="sure"></popup>
    		</view>
    </view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import mixins from '@/common/mixins.js';
    export default {
        mixins:[mixins],
    	computed: {
            // 获取vuex 数据
            ...mapState({
                statusBarHeight: state => state.init.data.statusBarHeight,          // 状态栏高度
                navHeight: state => state.init.data.navHeight,                      // 导航栏高度
                capHeight: state => state.init.data.capHeight,                      // 胶囊高度
                winHeight: state => state.init.data.safeArea,                       // 屏幕高度
                specification: state => state.sumbit.specification,                 // 选择后规格信息
                base_info: state => state.init.goods_detail.base_info,              // banner信息 - 商品基本信息
                goods: state => state.init.goods_detail.love,                       // 猜你喜欢
                advert_list: state => state.init.goods_detail.adverts               ,// 商品介绍
				product: state => state.init.product,
            }),
    		// specification() {
    		// 	return this.$store.state.sumbit.specification
    		// }
    	},
    	methods: {
    		// 点击选择一栏，弹出对应弹窗
    		show_specification() {
    			this.$refs.specificationPopup._data.show = true
    		},
    		// 子组件tabbar
    		change_status(index) {
    			this.active = index;
    		},
    		// 拨打电话
    		call() {
    			uni.makePhoneCall({
    				phoneNumber: this.phoneNumber
    			})
    			this.show_contact = false
    		},
    		// 导航栏返回按钮
    		back() {
    			uni.navigateBack({
    				delta: 1
    			})
    		},
    		// 滚动到指定位置
    		roll(type) {
    			var that = this
    			var fun = function() {
    				that.change_style = type
    				if (that.change_style) {
    					uni.pageScrollTo({
    						scrollTop: 0,
    						duration: 200
    					})
    				} else {
    					uni.pageScrollTo({
    						scrollTop: that.distance_from_top,
    						duration: 200
    					})
    				}
    				that.watchScroll = false
    				setTimeout(() => {
    					that.watchScroll = true
    				},300)
    			}
    			
    			
    			// 防止快速点击
    			if(this.onoff){
    				this.onoff = false
    				fun()
    				setTimeout(() => {
    					this.onoff = true
    				},300)
    			} else {
    				console.log("请稍后点击")
    			}
    		},
    		// 路由跳转
            jump(path, parmas) {
            	this.$Router.push({
            		path: path,
            		query: parmas
            	});
            },
    		// 点击查看更多
    		// check_more() {
    		// 	this.explain_height = this.original_height
    		// 	this.show_check_more = false
    		// },
    		// 立即兑换
    		to_exchange() {
    			let flag = true
    			let data = this.$refs.specificationPopup._data
    			data.show = true
    			data.specification.select_list.forEach(item => {
    				if(item.active === -1){
    					return flag = false
    				}
    			})
    			if(!flag) return;
    			let specification = data.text.join(' ') + ' ×' + data.count;
    			this.$store.dispatch('sumbit/get_specification', specification)
    			if (!this.specification) return ;
    			uni.navigateTo({
    				url: '/pages/gift/sumbit/index'
    			})
    			data.show = false;
    		},
            // 接收弹窗传递的组件值
            sure(val) {
                console.log(val,'eeee');
                // this.is_popup = e;
            },
            // 弹窗
            onClick() {
                this.$refs.popup.$data.show = true;
                // console.log(this.is_popup,'ssss');
            }
    	},
        // 监听页面滚动
    	onPageScroll: function(e) {
    		let that = this;
    		if(!that.watchScroll) {
    			return ;
    		}
    		if (e.scrollTop < that.distance_from_top && that.distance_from_bottom >= that.winHeight) {
    			that.change_style = true
    		} else  {
    			that.change_style = false
    		}
    	},
        // 页面初次渲染
    	onReady: function() {
    		// let that = this
            // 获取dom节点信息
            // that.getDom('.explain').exec(function(data) {
            //     // #ifdef MP-WEIXIN
            // 	that.distance_from_top = data[0].top - that.statusBarHeight - that.navHeight;
            //     // #endif
            //     // #ifdef MP-ALIPAY
            //     that.distance_from_top = data[0].top - that.statusBarHeight * 2 - that.navHeight;
            //     // #endif
            // 	that.distance_from_bottom = data[0].bottom
            // })
            // let showHeight = 0
            // for(let i = 0; i < 3; i++) {
            // 	that.getDom(`#explain_item${i}`).exec(function(data) {
            // 		showHeight += data[0].height
            // 		that.explain_height = showHeight + 'px'
            // 	})
            // }
    	},
    	beforeDestroy() {
    		// 选择规格弹窗label下标恢复-1
    		this.$refs.specificationPopup._data.specification.select_list.forEach(item => {
    			item.active = -1
    		})
    	},
        mounted() {
        },
    	data() {
    		//这里存放数据
    		return {
				order_url: "/pages/order/index",
    			onoff: true,		                // 解决防抖
    			active: 0,			                // 子组件tabbar、fixedTabbar的active
    			// phoneNumber: '111111111',			// 客服电话
    			// timer: null,						// 定时器
    			// change_style: true,					// 导航栏切换颜色商品和详情按钮
    			// online_time: '8:00-20:00', 			// 客服在线时间
    			// show_contact: false,				// 显示客服热线弹窗
    			// isCollect: false,   				// 是否收藏
    			// explain_height: '120px',			// 商品说明显示高度
    			// original_height: '100%',			// 点击显示更多，高度为百分比
    			// show_check_more: true,				// 点击显示更多
    			// watchScroll: true,					// 是否监听滚动
    			distance_from_top: 0,				// 详情距离顶部距离
    			distance_from_bottom: 0,			// 详情距离底部距离
                goods_tabs: {                       // 底部按钮信息
                    show: false,
                    integral: '8800',
                    btn: '加入购物车',
                    theme_btn: '立即兑换',
					sum: 0,
                    // type:true
                },
                popup: {                          // 弹窗数据
                    title: '暂无标题',			 // 弹窗标题
                    // avatars: ['/static/img/popup.png','',''],
                    avatars: [],
                    text: "请通过右上角分享邀请好友一起拼团吧",			// 描述文本
                    // btn1: '取消',			// 按钮1文字
                    // btn2: '确认',			// 按钮2文字
                },
                is_popup: ''
    		};
    	},
    };
</script>

<style lang="scss">
    @import './index.scss';
</style>
